<template>
	<view>
		<uni-forms ref="form" :modelValue="shareForm" label-width="220rpx" label-align="right" style="margin-top:40rpx;padding: 0 30rpx 0 10rpx;">
		<uni-forms-item label="标准合同模板：" name="name">
			<span style="line-height: 72rpx;">{{shareForm.name}}</span>
			</uni-forms-item>
			<uni-forms-item label="模板分享密码：" name="shareCode">
				<div class="flex_row">
					<uni-easyinput type="text" v-model="shareForm.shareCode" disabled />
					<button class="copyBtn" v-clipboard:copy="shareForm.shareCode" v-clipboard:success="clipboardSuccess" v-clipboard:error="clipboardError">复制</button>
				</div>
			</uni-forms-item>
			<uni-forms-item label="模板分享期限：" name="shareEndTime">
				<uni-datetime-picker v-model="shareEndTime" type="datetime" :start="shareEndTime" :end="endTime" />
			</uni-forms-item>
			<div class="explain_v">
			    <p>分享须知：</p>
			    <p>（1）通过模板分享密码可将标准合同模板分享给业务伙伴。</p>
			    <p>（2）集团内部企业及外部企业可通过模板分享密码提取合同模板。</p>
			    <p>（3）已了解将模板分享给业务伙伴的潜在风险，自愿承担由此造成的一切损失。</p>
			</div>   
		</uni-forms>
		<view class="footer-btn">
			<button @click="cancel" size="mini" class="cancel_btn">取消分享</button>
			<button @click="submitForm" size="mini" class="confirm_btn">确定分享</button>
		</view>
	</view>
</template>

<script>
	import {
	  cancelShareCode,
	  confirmShareCode,
	  getShareCode
	} from "@/api/ec/console/busiConfig/templateShare";
	import {parseTime} from "@/utils/ruoyi";

	export default {
		data() {
			return {
				shareForm:{shareCode:null}, //分享form 
				shareEndTime:new Date(Date.now()+24*60*60*1000), //模板分享期限 
				endTime: new Date(Date.now() + 24 * 60 * 60 * 1000 * 30), //模板分享期限 
			}
		},
		onLoad(option) {
			this.shareForm.id = option.id
			this.shareForm.name = option.name
			this.shareEndTime = parseTime(this.shareEndTime, "{y}-{m}-{d} {h}:{i}:{s}") //分享期限时间
			this.endTime = parseTime(this.endTime, "{y}-{m}-{d} {h}:{i}:{s}") //分享期限结束时间 
			this.handleShare(); 
		},
		methods: {
			handleShare(){
			    // 根据分享的模板id 创建分享码 
			    getShareCode({contractTemplateId:this.shareForm.id}).then((response)=>{
					this.shareForm.shareCode= response.msg;
			    });
			},
			/** 确定分享 */
			submitForm(){
				let params = {};
				params.contractTemplateId = this.shareForm.id;
				params.shareCode = this.shareForm.shareCode;
				params.shareEndTime = parseTime(this.shareEndTime, "{y}-{m}-{d} {h}:{i}:{s}") //转换时间格式
				confirmShareCode(params).then((response) => {
				  this.$copyText(this.shareForm.shareCode).then(() => {
					  this.$modal.msgSuccess("分享码已复制到剪切板，可粘贴。");
					  setTimeout(()=>{
					  	uni.navigateBack(1)
					  },300)
				    },() => {
				      this.$modal.msgError("复制失败！");
				    }
				  );
				});
			},
			/** 取消分享 */
			cancel(){
				cancelShareCode({shareCode: this.shareForm.shareCode}).then((response)=>{
				    this.$modal.msgError("取消共享");
					setTimeout(()=>{
						uni.navigateBack(1)
					},300)
				});    
			},
			/** 复制失败 */
			clipboardError() {
			    this.$modal.msgError("复制失败");
			},
			/** 复制链接成功 */
			 clipboardSuccess() {
			    this.$modal.msgSuccess("复制成功");
			},
		}
	}
</script>

<style scoped lang="scss">
	.copyBtn{
		color: #13ce66;
		background: #e7faf0;
		border: 1px solid #a1ebc2;
		font-size: 28rpx;
		margin-left: 10rpx;
		&:hover{
			background: #67C23A;
			border-color: #67C23A;
			color: #FFF;    
		}
	}
	
	.flex_row {
		display: flex;
		align-items: center;
	}
	page {
		background: $uni-bg-color;
	}
	::v-deep .uni-forms-item__label {
		font-size: 26rpx;
		padding: 0 12rpx 0 0;
	}
	.explain_v{
	  font-size: 26rpx;
	  color: #999999;
	  margin-left: 24rpx;
	  p{
	    margin:0;
	    padding: 4rpx 0;
	  }
	}
	.footer-btn {
		margin-top: 180rpx;
		width: 100%;
		text-align: center;
	
		.confirm_btn {
			margin-left: 50rpx;
			width: 40%;
			background-color: $uni-color-primary;
			color: #fff;
			display: inline-block;
			height: 70rpx;
			line-height: 70rpx;
		}
	}
	
	.cancel_btn {
		background-color: #fff;
		color: $uni-color-primary;
		width: 40%;
		display: inline-block;
		height: 70rpx;
		line-height: 70rpx;
		border: 1rpx solid $uni-color-primary;
	}

</style>
